<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
      crossorigin=""
    />
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script
      src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
      integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
      crossorigin=""
    ></script>
    <title>Document</title>
  </head>
  <body>
    <div
      id="map"
      style="height: 800px"
    ></div>
    <script>
      var map = L.map('map').setView([37.8, -96], 4);
      var geojsonFeature = {
        type: 'Feature',
        properties: {
          name: 'Coors Field',
          amenity: 'Baseball Stadium',
          popupContent: 'This is where the Rockies play!',
        },
        geometry: {
          type: 'Point',
          coordinates: [-104.99404, 39.75621],
        },
      };
      L.geoJSON(geojsonFeature).addTo(map);
      // 将样式封装到对象中，设置特征的样式
      var myLines = [
        {
          type: 'LineString',
          coordinates: [
            [-100, 40],
            [-105, 45],
            [-110, 55],
          ],
        },
        {
          type: 'LineString',
          coordinates: [
            [-105, 40],
            [-110, 45],
            [-115, 55],
          ],
        },
      ];

      var myStyle = {
        color: '#ff7800',
        weight: 5,
        opacity: 0.65,
      };

      L.geoJSON(myLines, {
        style: myStyle,
      }).addTo(map);

      // 根据单个属性的值设置定制样式
      var states = [
        {
          type: 'Feature',
          properties: { party: 'Republican' },
          geometry: {
            type: 'Polygon',
            coordinates: [
              [
                [-104.05, 48.99],
                [-97.22, 48.98],
                [-96.58, 45.94],
                [-104.03, 45.94],
                [-104.05, 48.99],
              ],
            ],
          },
        },
        {
          type: 'Feature',
          properties: { party: 'Democrat' },
          geometry: {
            type: 'Polygon',
            coordinates: [
              [
                [-109.05, 41.0],
                [-102.06, 40.99],
                [-102.03, 36.99],
                [-109.04, 36.99],
                [-109.05, 41.0],
              ],
            ],
          },
        },
      ];

      L.geoJSON(states, {
        style: function (feature) {
          switch (feature.properties.party) {
            case 'Republican':
              return { color: '#ff0000' };
            case 'Democrat':
              return { color: '#0000ff' };
          }
        },
      }).addTo(map);
    </script>
  </body>
</html>
